<template>
  <section class="hompage">
		<div class="title">欢迎使用sfopen框架</div>
		<div class="desc">进入到此页面说明前端框架已经部署成功</div>
		<div class="subtitle">帮助文档</div>
		<div class="content">
			<ul>
				<li>如果你是后端开发人员，请进入平台学习
					<a href="http://osfp.sf-express.com/#/i?n=j" target="_blank">后端在线文档</a>
				</li>
				<li>如果你是用于开发PC端应用，请参考
					<a href="http://osfp.sf-express.com/#/i?n=p" target="_blank">PC端在线文档</a>
				</li>
				<li>如果你是用于开发移动端端应用，请参考
					<a href="http://osfp.sf-express.com/#/i?n=m" target="_blank">移动端在线文档</a>
				</li>
			</ul>
		</div>
		<div class="subtitle">框架7大基础主题色(可拓展)</div>	
		<div class="content flex">
			<div class="colorSPan" :style="`background-color:${item}`" v-for="(item,index) in colorArr" :key="index">
				{{item}}
			</div>
		</div>
		<div class="subtitle">框架基础图标库</div>	
		<div class="desc">*注：可拓展,使用功能模块管理配置菜单图标时，可选值来自以下icon名称</div>
		<div class="content flex">
			<div class="content-item" v-for="item in dataArr" :key="item">
				<svg-icon :icon-class="item" />
				<div>{{item}}</div>
			</div>
		</div>
	</section>
</template>

<script>

export default {
  name: 'home',
  components: { },
  data() {
    return {
      dataArr:['404','bug','chart','clipboard','component','dashboard','documentation','drag',
      'edit','education','email','example','excel','exit-fullscreen','eye','eye-open','form',
      'fullscreen','guide','icon','international','language','link','list','lock','message',
      'money','nested','password','pdf','people','peoples','qq','search','shopping','size',
      'skill','star','tab','table','theme','tree','tree-table','user','wechat','zip'],
      colorArr:['#409EFF','#D80C24','#4DB948','#FF6161','#FF6A00','#026AFF','#4546FF']
    }
  },
  computed: {
  },
  created() {
  	
  },
  methods:{
  	handleSelectUser(item) {  //item包含该人员的所有信息
		  this.user=item
		}
  }
}
</script>

<style lang="scss" scoped>
.hompage{
	color:#606266;
	font-size: 14px;
	line-height: 24px;
	.title{
		margin: 20px 0 0;
		font-size: 18px;
		color:#333;
	}
	.subtitle{
		margin: 20px 0 0;
		color:#333;
	}
	.desc{
		margin: 5px 0 10px;
		color:#666;
	}
	.content{
		margin: 5px 0 30px;
		a{
			color: #409EFF;
		}
	}
	.flex{
		display: flex;
		flex-wrap: wrap;
	}
	.content-item{
		min-width:110px;
		padding: 5px 10px;
		text-align: center;
	}
	.colorSPan{
		width:120px;
		height:60px;
		line-height: 60px;
		border-radius: 4px;
		margin: 5px;
		color:#fff;
		font-size: 16px;
		text-align: center;
	}
}
	
</style>